
<template>
  <div class="siteMap">
    <div class="mains_contain" style="width: 100%">
      <div style="display: flex">
        <div class="echartsList">
          <div class="title">站点预览</div>
          <div class="top">
            <div id="echart_main"></div>
            <ul class="siteUl">
              <li v-for="(item, index) in tableData" :key="index" @click="toSite(item)">
                <span :style="{ background: item.sitesColor }"></span>
                <span class="midSpan" :style="{ color: item.sitesColor }">{{
                  item.sitesName
                }}</span>
                <span :style="{ color: item.sitesColor }">{{
                  item.allLineCount
                }}</span>
              </li>
            </ul>
          </div>
          <div class="title">设备状态</div>
          <div class="top">
            <div id="echart_main1"></div>
            <ul class="siteUl siteUlType">
              <li v-for="(item, index) in tableData1" :key="index">
                <span :style="{ background: item.sitesColor }"></span>
                <span class="midSpan" :style="{ color: item.sitesColor }">{{
                  item.sitesName
                }}</span>
                <span :style="{ color: item.sitesColor }">{{
                  item.allLineCount
                }}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="m-map" style="flex: 1">
          <div id="js-container" class="map"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { siteList, siteAllList, countDeviceNum } from "@/api/site/site";
// import AMap from "AMap";
// import AMapUI from "AMapUI";
export default {
  data() {
    return {
      placeSearch: null,
      dragStatus: false,
      AMapUI: null,
      AMap: null,
      pagination: {
        total: 0,
        page: 1,
        pageSize: 10,
      },
      tableData: [],
      polygons: [],
      tableData1: [],
      currentAreaNode: "",
      districtExplorer: null
    };
  },
  watch: {},
  created() { },
  mounted() {
    this.initMap();
    this.getList();
    this.getCountDeviceNum();
    this.sensorGetEchart1();
  },
  methods: {
    getCountDeviceNum() {
      countDeviceNum().then((res) => {
        let curData = [
          {
            name: "正常",
            value: res.data.countOnLine,
          },
          {
            name: "离线",
            value: res.data.countOffLine,
          },
        ];
        this.tableData1 = [
          {
            sitesColor: "#1AC3AC",
            sitesName: "正常",
            allLineCount: res.data.countOnLine,
          },
          {
            sitesColor: "#999999",
            sitesName: "离线",
            allLineCount: res.data.countOffLine,
          },
        ];
        this.$nextTick(() => {
          this.sensorGetEchart1(curData);
        });
      });
    },
    sensorGetEchart(curData, colorList) {
      var myChart = this.$echarts.init(document.getElementById("echart_main"));
      var option = {
        color: colorList.length ? colorList : ["#ccc"],
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "16",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data:
              curData && curData.length
                ? curData
                : [
                  {
                    value: 0,
                    name: "暂无",
                  },
                ],
          },
        ],
      };
      myChart.setOption(option);
    },
    sensorGetEchart1(curData) {
      var myChart = this.$echarts.init(document.getElementById("echart_main1"));
      var option = {
        color: ["#1AC3AC", "#999999"],
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "16",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data:
              curData && curData.length
                ? curData
                : [
                  {
                    value: 0,
                    name: "暂无",
                  },
                ],
          },
        ],
      };
      myChart.setOption(option);
    },
    getList() {
      var that = this;
      siteAllList().then((res) => {
        
        let curData = [];
        let colorList = [];
        if (res.code == 200) {
          this.tableData = res.data;
          this.tableData.forEach((marker) => {
            let obj = {
              value: marker.allLineCount,
              name: marker.sitesName,
              baseAreaCode: marker.baseAreaCode
            };
            curData.push(obj);
            colorList.push(marker.sitesColor);
            let markers = new AMap.Marker({
              content: `<div style='position: relative;'><div style='width: 120px;
                        text-align: center;
                        position: absolute;
                        top: -30px;
                        left: 50%;
                        transform: translateX(-50%);
                        min-height: 24px;
                        line-height: 1.5;
                        background:Rgba(255,255,255,0.5);
                        padding: 0 10px;
                        color: #000;
                        border-radius:5px;
                        font-weight: bold;'>${marker.sitesName}</div><img style='width:25px' src='http://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png'/></div>`,
              map: this.map,
              position: [Number(marker.sitesLng), Number(marker.sitesLat)],
              offset: new AMap.Pixel(-13, -30),
              extData: marker.baseAreaCode
            });
            setTimeout(() => {
              that.map.add(markers);
              AMap.event.addListener(markers, "click", function(e) {
                
                
                let code = e.target.De.extData
                that.switch2AreaNode(code)
                that.map.setCenter(markers.getPosition());
              });
              that.map.setFitView();
            }, 400);
          });
          this.$nextTick(() => {
            this.sensorGetEchart(curData, colorList);
          });
        }
      });
    },
    toSite(item) {
      // this.loadmap(item.baseAreaCode);
      this.switch2AreaNode(item.baseAreaCode);
    },
    loadmap(val) {
      let params = val;
      var that = this; // 插件
      for (var j = 0, k = that.polygons.length; j < k; j++) {
        that.polygons[j].setMap(null);
      }
      AMap.plugin(["AMap.DistrictSearch", "AMap.Polygon"], function() {
        // 标注
        var opts = {
          subdistrict: 1,
          extensions: "all",
          showbiz: false,
        };
        var district = new AMap.DistrictSearch(opts); // 注意：需要使用插件同步下发功能才能这样直接使用
        function getData(data) {
          
          that.areacode = data.citycode;
          var bounds = data.boundaries;
          if (data.level === "country") {
            that.provinces = data.districtList;
            that.citys = [];
            that.districts = [];
          } else if (data.level === "province") {
            // that.map.remove(that.marker);
            that.citys = data.districtList;
            that.districts = [];
            that.address = "";
          } else if (data.level === "city") {
            that.districts = data.districtList;
          }
          if (data.level === "country" && bounds) {
            return false;
          } else {
            for (var i = 0, l = bounds.length; i < l; i++) {
              var polygon = new AMap.Polygon({
                map: that.map,
                strokeWeight: 1,
                strokeColor: "white",
                fillColor: "#4C78DA",
                fillOpacity: 0.8,
                path: bounds[i],
              });
              that.polygons.push(polygon);
            }
            that.map.setFitView();
          }
        }
        let sear = val ? params : "中国";
        district.search(sear, function(status, result) {
          if (status === "complete") {
            getData(result.districtList[0]);
          }
        });
      });
    },
    mapInit() {
      var that = this;
      this.map = new AMap.Map("mapContainer", {
        resizeEnable: true,
        zoom: 10,
        center: [116.39, 39.9],
      });

      AMap.plugin(
        ["AMap.Autocomplete", "AMap.PlaceSearch", "AMap.Geocoder"],
        function() {
          that.map.on("click", function(e) {
            that.map.setFitView();
          });
        }
      );
    },
    // 实例化地图
    initMap() {
      var that = this;
      // 加载PositionPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
      AMapUI.loadUI(["misc/PositionPicker", "geo/DistrictExplorer"], (PositionPicker, DistrictExplorer) => {
        that.map = new AMap.Map("js-container", {
          resizeEnable: true,
          zoom: 10,
        });
        that.districtExplorer = new DistrictExplorer({
          eventSupport: true, //打开事件支持
          map: that.map
        });
        // 启用工具条
        AMap.plugin(["AMap.ToolBar"], function() {
          that.map.addControl(
            new AMap.ToolBar({
              position: "RB",
            })
          );
        });
      });
    },
    switch2AreaNode(adcode, callback) {
      
      var that = this
      if (
        this.currentAreaNode &&
        "" + this.currentAreaNode.getAdcode() === "" + adcode
      ) {
        return;
      }
      this.loadAreaNode(adcode, function(error, areaNode) {
        if (error) {
          if (callback) {
            callback(error);
          }
          return;
        }
        that.currentAreaNode = areaNode;
        //设置当前使用的定位用节点
        that.districtExplorer.setAreaNodesForLocating([that.currentAreaNode]);
        that.refreshAreaNode(areaNode);
        if (callback) {
          callback(null, areaNode);
        }
      });
    },
    //切换区域后刷新显示内容
    refreshAreaNode(areaNode) {
      
      this.districtExplorer.setHoverFeature(null);
      this.renderAreaPolygons(areaNode);
    },
    //绘制某个区域的边界
    renderAreaPolygons(areaNode) {
      //更新地图视野
      this.map.setBounds(areaNode.getBounds(), null, null, true);
      //清除已有的绘制内容
      this.districtExplorer.clearFeaturePolygons();
      //绘制子区域
      this.districtExplorer.renderSubFeatures(areaNode, function(feature, i) {
        var fillColor = '#4C78DA';
        var strokeColor = 'white';
        return {
          cursor: "default",
          bubble: true,
          strokeColor: strokeColor, //线颜色
          strokeOpacity: 1, //线透明度
          strokeWeight: 1, //线宽
          fillColor: fillColor, //填充色
          fillOpacity: 0.35, //填充透明度
        };
      });

      //绘制父区域
      this.districtExplorer.renderParentFeature(areaNode, {
        cursor: "default",
        bubble: true,
        strokeColor: "black", //线颜色
        strokeOpacity: 1, //线透明度
        strokeWeight: 1, //线宽
        fillColor: areaNode.getSubFeatures().length ? null : '#4C78DA', //填充色
        fillOpacity: 0.35, //填充透明度
      });
    },

    //加载区域
    loadAreaNode(adcode, callback) {
      let that = this
      this.districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
        if (error) {
          if (callback) {
            callback(error);
          }
          return;
        }
        that.renderAreaPanel(areaNode);
        if (callback) {
          callback(null, areaNode);
        }
      });
    },
    //填充某个节点的子区域列表
    renderAreaPanel(areaNode) {

    },
    //绘制区域面板的节点
    renderAreaPanelNode(ele, props, color) {
    },
  },
};
</script>

<style lang="scss">
.siteMap {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  .m-map {
    flex: 1;
    height: 800px;
    position: relative;
    .map {
      width: 100%;
      height: 100%;
    }
  }
  .echartsList {
    width: 350px;
    padding-top: 30px;
    margin-right: 50px;
    .title {
      font-size: 16px;
      padding-left: 30px;
    }
  }
  .top {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 200px;
    width: 100%;
    margin-bottom: 80px;
  }

  #echart_main,
  #echart_main1 {
    width: 150px;
    height: 150px;
  }
  .siteUl {
    display: flex;
    flex-direction: column;
    max-height: 150px;
    overflow-y: scroll;
    margin-left: -80px;
    min-width: 150px;
    // min-height: 150px;
    /*滚动条整体*/
    &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
    }
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 6px;
      background-color: #ccc;
      margin-right: 2px;
    }
    &::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      background: white;
      border-radius: 6px;
    }
    li {
      line-height: 25px;
      padding: 0 5px;
      color: #333;
      cursor: pointer;
      display: flex;
      align-items: center;
      span:first-child {
        width: 10px;
        height: 10px;
        border-radius: 5px;
        display: inline-block;
      }
      .midSpan {
        margin: 0 10px;
      }
    }
  }
  .siteUlType {
    overflow: visible;
  }
}
</style>